<template>
  <div class="container">
    <a-row gutter="20">
      <a-col :span="10">
        <a-list>
          <template #header>材质列表</template>
          <a-list-item v-for="(item,index) in state.caiZhiList" :key="item.id">
            {{item.name}}
            <template #actions>
              <a-space>
                <a-button type="primary" size="small" @click="caizhiSetGongYi(item.id, item.name,state.gongYiType.duanzao)">
                  锻造工艺
                </a-button>
                <a-button type="primary" size="small" @click="caizhiSetGongYi(item.id, item.name,state.gongYiType.huanleng)">
                  缓冷工艺
                </a-button>
                <a-button type="primary" size="small" @click="caizhiSetGongYi(item.id, item.name,state.gongYiType.jijia)">
                  机加工艺
                </a-button>
              </a-space>
            </template>
          </a-list-item>
        </a-list>
      </a-col>

      <a-col :span="14" v-if="state.activeCzName">
        <H2 style="text-align: left;color: #0048ff">{{state.activeCzName}}设置关联工艺</H2>
        <div style="margin-bottom: 10px">
          <a-checkbox-group v-model="state.gongyichecked">
            <a-grid :cols="2" :colGap="10" :rowGap="50">
              <a-grid-item v-for="(gongyi,index) in state.gongyiList" :key="gongyi.id">
                <a-checkbox :value="gongyi.id" >{{gongyi.name}}</a-checkbox>
              </a-grid-item>
            </a-grid>
          </a-checkbox-group>
        </div>
        <a-button type="primary" status="warning" @click="saveCaiZhiGongYi"><template #icon><icon-save /></template>保存</a-button>
      </a-col>
    </a-row>
  </div>
</template>

<script lang="ts" setup>
import axios from "axios";
import { Message } from '@arco-design/web-vue'
import {reactive, ref, onMounted, onUnmounted, defineAsyncComponent} from "vue";
import { isArray } from "@/utils/is";
import GongYiType from "@/utils/gongYiType";

const state = reactive({
  gongYiType:GongYiType,
  caiZhiList : [],
  activeCzId : 0,
  activeCzName : "",
  activeGongyitype:"",

  allgongyiList : [],
  gongyiList : [],
  gongyichecked : [],
})
const loadGongYiByCaiZhi = ()=>{
  axios.post('/gongyi/listcaizhigongyi', {id : state.activeCzId, gongyitype:state.activeGongyitype}).then(res => {
    const { data } = res
    if(isArray(data)){
      state.gongyichecked = data.map( (it)=>{
        return it.id
      })
    }
  })
}
const caizhiSetGongYi = (id, name, gongyitype) =>{
  state.activeCzId = id;
  state.activeCzName = name
  state.activeGongyitype = gongyitype
  state.gongyiList = state.allgongyiList.filter( it => it.cdefine1 == gongyitype)
  loadGongYiByCaiZhi();
}
const saveCaiZhiGongYi = () =>{
  axios.post('/gongyi/savecaizhigongyi', {caizhiid : state.activeCzId, gongyichecked : state.gongyichecked, gongyitype:state.activeGongyitype}).then( (res) =>{
    const {code,msg, data} = res;
    if(code != '200'){
      Message.error(msg);
    }else{
      Message.success(msg)
    }
  })
}

const loadCaiZhi = ()=>{
  axios.post('/caizhi/listallcaizhi', {}).then(res => {
    const { data } = res
    state.caiZhiList = data
  })
}
const loadGongYi = ()=>{
  axios.post('/gongyi/listallgongyi', {}).then(res => {
    const { data } = res
    state.allgongyiList = data
  })
}
onMounted(()=>{
  loadCaiZhi();
  loadGongYi();
})
onUnmounted(()=>{

})
</script>

<style scoped>

</style>
